<!-- 后台数据展示页面 -->
<template>
  <div>

    <!-- 管理员数据看板 -->
    <div v-if="remarks == '管理员'">
        <el-row :gutter="20" class="mgb20">
            <el-col :span="6">
                <el-card shadow="hover">
                <div class="grid_content">
                    <div class="grid_content_center">
                    <div class="grid_num">{{userCount}}</div>
                    <div>用户总数</div>
                    </div>
                </div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card shadow="hover">
                <div class="grid_content">
                    <div class="grid_content_center">
                    <div class="grid_num">{{companyCount}}</div>
                    <div>企业总数</div>
                    </div>
                </div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card shadow="hover">
                <div class="grid_content">
                    <div class="grid_content_center">
                    <div class="grid_num">{{recruitInfoCount}}</div>
                    <div>招聘信息数量</div>
                    </div>
                </div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card shadow="hover">
                <div class="grid_content">
                    <div class="grid_content_center">
                    <div class="grid_num">{{jobInfoCount}}</div>
                    <div>求职信息数量</div>
                    </div>
                </div>
                </el-card>
            </el-col>
        </el-row>
        <el-row :gutter="20" class="mgb20">
          <el-col :span="12">
              <h3>用户性别比例</h3>
              <div class="consumerSex_backstyle"> 
              <ve-pie :data="consumerSex" :theme="options"></ve-pie>
              </div>
          </el-col>
          <el-col :span="12">
                <h3>用户婚姻状态</h3>
                <div class="consumerSex_backstyle"> 
                <ve-pie :data="userIsMarriedlist"></ve-pie>
                </div>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="mgb20">
            <el-col :span="12">
              <h3>用户地区分布</h3>
              <div class="consumerSex_backstyle"> 
              <ve-histogram :data="userLocation"></ve-histogram>
              </div>
            </el-col>
            <el-col :span="12">
                <h3>企业地区分布</h3>
                <div class="consumerSex_backstyle"> 
                <ve-histogram :data="companyLocation" :theme="options1"></ve-histogram>
                </div>
            </el-col>
      </el-row>
    </div>

    <!-- 学生（用户）数据看板 -->
    <div v-if="remarks == '用户'">
        <el-row :gutter="20" class="mgb20">
            <el-col :span="6">
                <el-card shadow="hover">
                <div class="grid_content">
                    <div class="grid_content_center">
                    <div class="grid_num">{{userCount-1}}<span class="zi_style">个</span></div>
                    <div>同学和您一起找工作</div>
                    </div>
                </div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card shadow="hover">
                <div class="grid_content">
                    <div class="grid_content_center">
                    <div class="grid_num">{{companyCount}}<span class="zi_style">家</span></div>
                    <div>企业发布招聘信息</div>
                    </div>
                </div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card shadow="hover">
                <div class="grid_content">
                    <div class="grid_content_center">
                    <div class="grid_num">{{recruitInfoCount}}<span class="zi_style">个</span></div>
                    <div>招聘信息</div>
                    </div>
                </div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card shadow="hover">
                <div class="grid_content">
                    <div class="grid_content_center">
                    <div class="grid_num">{{jobInfoCount}}<span class="zi_style">个</span></div>
                    <div>已发布的求职信息</div>
                    </div>
                </div>
                </el-card>
            </el-col>
        </el-row>
        <el-row :gutter="20" class="mgb20">
          <el-col :span="12">
            <h3>您发布的求职信息</h3>
            <div class="consumerSex_backstyle"> 
            <ve-histogram :data="userJobInfoTypeList"></ve-histogram>
            </div>
          </el-col>
          <el-col :span="12">
            <h3>&nbsp;</h3>
            <div class="consumerSex_backstyle"> 
            <ve-histogram :data="userJobInfoBySalaryList"></ve-histogram>
            </div>
          </el-col>
        </el-row>
    </div>

    <!-- 企业数据看板 -->
    <div v-if="remarks == '企业'">
        <el-row :gutter="20" class="mgb20">
            <el-col :span="6">
                <el-card shadow="hover">
                <div class="grid_content">
                    <div class="grid_content_center">
                    <div class="grid_num">{{userCount}}<span class="zi_style">位</span></div>
                    <div>学生在找工作</div>
                    </div>
                </div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card shadow="hover">
                <div class="grid_content">
                    <div class="grid_content_center">
                    <div class="grid_num">{{companyCount}}<span class="zi_style">家</span></div>
                    <div>企业发布招聘信息</div>
                    </div>
                </div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card shadow="hover">
                <div class="grid_content">
                    <div class="grid_content_center">
                    <div class="grid_num">{{recruitInfoCount}}<span class="zi_style">个</span></div>
                    <div>招聘信息</div>
                    </div>
                </div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card shadow="hover">
                <div class="grid_content">
                    <div class="grid_content_center">
                    <div class="grid_num">{{jobInfoCount}}<span class="zi_style">个</span></div>
                    <div>已发布的求职信息</div>
                    </div>
                </div>
                </el-card>
            </el-col>
        </el-row>
        <el-row :gutter="20" class="mgb20">
          <el-col :span="12">
              <h3>用户性别比例</h3>
              <div class="consumerSex_backstyle"> 
              <ve-pie :data="consumerSex" :theme="options"></ve-pie>
              </div>
          </el-col>
          <el-col :span="12">
                <h3>用户婚姻状态</h3>
                <div class="consumerSex_backstyle"> 
                <ve-pie :data="userIsMarriedlist"></ve-pie>
                </div>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="mgb20">
            <el-col :span="12">
              <h3>用户地区分布</h3>
              <div class="consumerSex_backstyle"> 
              <ve-histogram :data="userLocation"></ve-histogram>
              </div>
            </el-col>
            <el-col :span="12">
                <h3>企业地区分布</h3>
                <div class="consumerSex_backstyle"> 
                <ve-histogram :data="companyLocation" :theme="options1"></ve-histogram>
                </div>
            </el-col>
      </el-row>
    </div>

  </div>
</template>

<script>
import { 
  getAllConsumer,
  getCurrentLoginRoleName,
  getAllCompany,
  getAllRecruitInfo, 
  getAllJobInfo,
  getCurrentUserJobInfo,
} from "../../../api/dataViewApi/index";
import { getStore } from '../../../storage/storage';
import { userLocationList,companyLocationList } from '../../../assets/data/dataView';
export default {
  data(){
    return {

        remarks: '', // 标记当前登陆的是管理员，用户，还是企业

      userCount: 0,  // 用户总数
      companyCount:0,       // 企业总数
      recruitInfoCount:0, // 招聘信息数量
      jobInfoCount:0,     // 求职信息数量

      consumerSex:{      // 按性别分类的用户数
        columns: ['性别','总数'],
        rows: [
          {'性别': '男','总数':0},
          {'性别': '女','总数':0}
        ]
      },
      userIsMarriedlist:{  // 按用户婚姻状态分类的用户数
        columns: ['婚姻状态','总数'],
        rows: [
          {'婚姻状态': '已婚','总数':0},
          {'婚姻状态': '未婚','总数':0}
        ]
      },
      options:{
        color: ['#87cefa','#ffc0cb']
      },
      options1:{
        color: ['yellow']
      },
      userLocation: [],
      companyLocation: [],
      userJobInfoTypeList:{  // 用户求职信息（按岗位类型分类）
        columns: ['岗位','总数'],
        rows: [
          {'岗位': 'java工程师','总数':0},
        ]
      },
      userJobInfoBySalaryList:{  // 用户求职信息（按工资分类）
        columns: ['薪资','总数'],
        rows: [
          {'薪资': '10K','总数':0},
        ]
      }
    }
  },
  created(){
      this.changeRemarks();
  },
  mounted(){
    this.getConsumer();
    this.getAllCompanyFunc();
    this.getAllRecruitInfoFunc();
    this.getAllJobInfoFunc();
    this.getCurrentUserJobInfoFunc();
  },

  methods: {
    // 获取所有用户
    getConsumer(){
      getAllConsumer().then(res=>{
        this.userLocation = userLocationList;
        this.userCount = res.data.data.length;
        this.consumerSex.rows[0]['总数'] = this.setSex(1,res.data.data);
        this.consumerSex.rows[1]['总数'] = this.setSex(0,res.data.data);
        this.userIsMarriedlist.rows[0]['总数'] = this.setIsMarried(1,res.data.data);
        this.userIsMarriedlist.rows[1]['总数'] = this.setIsMarried(0,res.data.data);
        for(let item of res.data.data){
          this.getByLocation(item.address);
        }
      })
    },

    setSex(sex,val){   // 根据性别获取用户数
      let count = 0;
      for(let item of val){
        if(sex == item.gender){
          count++;
        }
      }
      return count;
    },

    setIsMarried(ismarried,val){   // 根据婚姻状态获取用户数
      let count = 0;
      for(let item of val){
        if(ismarried == item.maritalStatus){
          count++;
        }
      }
      return count;
    },

    // 获取所有企业
    getAllCompanyFunc(){
      getAllCompany().then(res=>{
        this.companyCount = res.data.data.length;
        this.companyLocation = companyLocationList;
        for(let item of res.data.data){
          this.getByCompanyLocation(item.address);
        }
      })
    },

    // 获取所有招聘信息
    getAllRecruitInfoFunc(){
      getAllRecruitInfo().then(res=>{
        this.recruitInfoCount = res.data.data.length;
      })
    },

    // 获取所有求职信
    getAllJobInfoFunc(){
      getAllJobInfo().then(res=>{
        this.jobInfoCount = res.data.data.length;
      })
    },

    getByCompanyLocation(location){
      for(let item of this.companyLocation.rows){
        if(location.includes(item['地区'])){
          item['总数']++;
        }
      }
    },

    getByLocation(location){
      for(let item of this.userLocation.rows){
        if(location.includes(item['地区'])){
          item['总数']++;
        }
      }
    },

    // 获取当前登陆的是管理员还是用户还是企业
    changeRemarks(){
        const params = {
            account: getStore("account"),
        }
        getCurrentLoginRoleName(params).then(res=>{
            this.remarks = res.data.data.remarks
        })
    },

    // 得到当前用户发布的求职信息
    getCurrentUserJobInfoFunc(){
      const params = {
        account: getStore("account"),
      }
      getCurrentUserJobInfo(params).then(res=>{
        for(let item of res.data.data){
          this.userJobInfoTypeList.rows.push({'岗位': item.positionName,'总数': 1})
          this.userJobInfoBySalaryList.rows.push({'薪资': item.salary,'总数': 1})
        }
      });
    },

  },
}
</script>

<style scoped>
.mgb20{
  margin-bottom: 20px;
}
.grid_content{
  display: flex;
  align-items: center;
  height: 50px;
}
.grid_content_center{
  flex: 1;
  text-align: center;
  font-size: 14px;
  color: darkgray;
}
.grid_num{
  font-size: 30px;
  font-weight: bold;
  color: rgb(94, 110, 202);
}
.consumerSex_backstyle{
  background-color: white;
}
.zi_style{
  font-size: 20px;
  font-weight: bold;
  color: rgb(94, 110, 202);
}
</style>
